<template>
  <div class="login-banner">
    <div class="login-main">
      <div class="login-banner-bg"><span></span><img src="@/assets/images/big.jpg" /></div>
      <div class="login-box">

        <h3 class="title">登录商城</h3>

        <div class="clear"></div>

        <div class="login-form">
          <el-form ref="userForm" :model="userForm" :rules="rules">
            <el-form-item prop="account">
              <el-input placeholder="邮箱/手机/用户名" v-model="userForm.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="密码" type="password" v-model="userForm.password"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="login-links">
          <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
          <a href="#" class="am-fr">忘记密码</a>
<!--          <a href="register.html" class="zcnext am-fr am-btn-default">注册</a>-->
          <br />
        </div>
        <div class="am-cf">
          <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm" @click="login('userForm')">
        </div>
        <div class="am-cf">
          <input type="submit" name="" value="注 册" class="am-btn am-btn-default am-btn-sm" @click="goRegister()">
        </div>
        <div class="partner">
          <h3>合作账号</h3>
          <div class="am-btn-group">
            <li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
            <li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span> </a></li>
            <li><a href="#"><i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span> </a></li>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginMain",
  data() {
    return {
      userForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入邮箱/手机/用户名', trigger: 'blur'},
          {max: 10, message: '不能大于10个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {max: 10, message: '不能大于20个字符', trigger: 'blur'},
          {min: 6, message: '不能小于6个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    login(formName){
      this.$refs[formName].validate((valid)=>{
        console.log(JSON.stringify(this.userForm))
        if (valid){
          //调用store中的登录方法
          this.$store.dispatch('login',this.userForm).then(()=>{
            this.$message({message:'登录成功',type:'success',showClose:true})
            if (this.$route.query.redirect){
              this.$router.push(this.$route.query.redirect)
            }else {
              this.$router.replace({path:'/'})
            }
          }).catch(error=>{
            console.log(error)
            if (error!='error'){
              this.$message({message:error,type:'error',showClose:true})
            }
          })
        }else {
          this.$message({
            showClose: true,
            message: '输入有误请检查!!!',
            type: 'warning'
          });
          return false;
        }
      });
    },
    goRegister(){
      this.$router.push('/register')
    }
  },
  created() {
    this.$message({message:'欢迎登录!',type:'success'})
  }
}
</script>

<style scoped>
.login-banner{
  margin-top: 30px;
}
</style>